<template>
    <div class="mouldAddPages">
        <div class="Box">
            <div class="Title">
                <lines name='填写塑造信息'></lines>
            </div>
            <div class="topInput">
                <el-form :model="taskName"  label-width="100px" class="demo-ruleForm">
                    <el-form-item
                        label="任务名称"
                        prop="name"
                        :rules="[
                            { required: true, message: '请输入任务名称', trigger: 'blur' },
                        ]"
                    >
                        <el-input clearable type="age" style="width:300px"  v-model.trim="taskName.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="Box">
            <div class="Title">
                <lines name='填写塑造任务程序'></lines>
            </div>
            <div class="topInput">
                <el-form  label-width="100px" class="demo-ruleForm">
                    <el-form-item
                        label="塑造程序"
                        prop="mouldValue"
                        :rules="[
                            { required: true, message: '请输入任务名称', trigger: 'blur' },
                        ]"
                    >
                        <el-select v-model="mouldValue" placeholder="请选择"  @change="changeValue">
                            <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.programName"
                            :value="item.programName"
                           >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="lists">
            <div class="Title">
                <lines name='选择任务输入参数'></lines>
            </div>
            <div class="topLists">
               <el-form  label-width="100px"  class="demo-ruleForm" v-show="mouldValue">
                    <el-form-item
                        :label="'参数'+(index+1)+'：'"
                        v-for="(item,index) in checkUpload"
                        :key='index'
                        :rules="[
                            { required: true, message: '请输入任务名称', trigger: 'blur' },
                        ]"
                        
                    >
                    <div v-if="item.type == 1" style="color:#E6A23C">
                        请选择视频文件
                    </div>
                    <div v-else-if="item.type == 2" style="color:#E6A23C">
                        请选择音频文件
                    </div>
                    <div v-else-if="item.type == 3" style="color:#E6A23C">
                        请选择图片文件
                    </div>
                        <el-tabs v-model="item.tabs" @tab-click="(tab, event)=>handleClick(tab, event, index, item.tabs, item.radio)">
                            <el-tab-pane>
                                <el-radio slot="label" v-model="item.radio" label="1" v-on:change="(e)=>change(e,index)">本地上传</el-radio>
                                <!-- <el-upload
                                    class="avatar-uploader"
                                    action="http://192.168.1.146:8088/api/mouldService/v1/uploadFile"
                                    list-type="picture-card"
                                    :data="token"
                                    :before-upload="(file) => beforeAvatarUpload(file,index,item.type)"
                                    :ref="item.ref"
                                    :limit="1">
                                    <img  v-if="item.type == 3 && item.pic" :src="item.pic" class="avatar">
                                    <video  v-else-if="item.type == 1 &&  item.pic" :src="item.pic" controls="controls"  class="avatar"></video>
                                    <audio  v-else-if="item.type == 2 &&  item.pic" :src="item.pic" controls="controls"  class="avatar"></audio>
                                    <i  v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    <div class="deleteFileList" @click="changeindex(index)"></div>
                                </el-upload> -->

                                <el-upload
                                    class="avatar-uploader"
                                    action="http://192.168.1.146:8088/api/mouldService/v1/uploadFile"
                                    drag
                                    :data="token"
                                    multiple>
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                                    <img  v-if="item.type == 3 && item.pic" :src="item.pic" class="avatar">
                                    <video  v-else-if="item.type == 1 &&  item.pic" :src="item.pic" controls="controls"  class="avatar"></video>
                                    <audio  v-else-if="item.type == 2 &&  item.pic" :src="item.pic" controls="controls"  class="avatar"></audio>
                                    <i  v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    <div class="deleteFileList" @click="changeindex(index)"></div>
                                </el-upload>
                            </el-tab-pane>

                            <el-tab-pane>
                                <el-radio slot="label" v-model="item.radio" label="2" v-on:change="(e)=>change(e,index)">媒体库选择</el-radio>
                                <div class="ulLists">
                                    <!-- <el-select v-model="checkUpload[index].url" placeholder="请选择" @change="(ite)=>mediaChangeValue(ite,index)">
                                        <el-option
                                            v-for="ite in item.mediaOptions"
                                            :key="ite.id"
                                            :label="ite.fileName"
                                            :value="ite.fileName">
                                        </el-option>
                                    </el-select> -->
                                    <el-autocomplete
                                        clearable
                                        v-model="checkUpload[index].url"
                                        :fetch-suggestions="(queryString, cb)=>querySearchAsync(queryString, cb, index)"
                                        placeholder="请输入标签"
                                        @select="(item)=>handleSelect(item,index)"
                                    ></el-autocomplete>
                                    <img  v-if="item.type == 3 && item.pic" :src="item.pic" class="avatar" style="margin-top:15px">
                                    <video  v-else-if="item.type == 1 &&  item.pic" :src="item.pic" controls="controls" class="avatar" style="margin-top:15px"></video>
                                    <audio  v-else-if="item.type == 2 &&  item.pic" :src="item.pic" controls="controls" class="avatar" style="margin-top:15px"></audio>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        
        <div class="bottom">
            <el-button @click="$router.go(-1)">返回</el-button>
            <el-button type="primary" @click="medieSure">确认</el-button>
        </div>
    </div>
</template>

<script>
import lines from '../../components/lines.vue'
import { insertMould, getProgramList ,uploadFile, multimedia, getProgramAll} from '../../api/index'
export default {
    components:{
        lines,
    },
    data(){
        return{
            token:{},
            count:[],
            taskName:{
                name: '',
            },
            mouldValue:'',
            mouldId:'',
            videoForm:{},
            videoFlag:false,
            imageUrl: '',
            options: [],
            checkUpload:[],
            mediaOptions: [],
            value: '',
            fileIndex:0,
            form: {},
            //新媒体选择
            restaurants: [],
            loadAll:[],
            state: '',
            timeout:  null
        }
    },
    mounted(){
        this.initOption()
        this.token = {token:sessionStorage.getItem('token')}
        
    },
    methods:{
        initOption(){
            let programName = ""
            let programType = 1
            let status = 1
            let params = { programName, programType, status}
            getProgramAll(params).then(res=>{
                let re = res.data.data.object
                if(res.data.message = "success"){
                    this.options = re
                    this.changeValue(this.options[0].programName)
                }
            })
        },
        // 选择器
        changeindex(index){
            this.fileIndex = index
            this.checkUpload[this.fileIndex].url = ''
            this.checkUpload[this.fileIndex].pic = ''
            eval("this.$refs.upload" +(this.fileIndex))[0].clearFiles()
        },
        changeValue(e){
            this.mouldValue = e
            let programName = String(e)
            let programType = ""
            let status = 1
            let params = {programName,programType,status}
            getProgramAll(params).then(res=>{
                if(res.data.message = "success"){
                    let re = res.data.data.object[0]
                    this.mouldId = re.id
                    this.checkUpload = []
                    this.count = []
                    if(re.programParameters1 && re.programParameters1 != null){
                        this.checkUpload.push({
                            tabs: '0',
                            radio: '1',
                            type: re.programParameters1,
                            pic: '',
                            url: '',
                            ref: 'upload0',
                            mediaOptions: []
                        })
                        let pageNum = 1
                        let pageSize = 1000
                        let fileName = ""
                        let mediaType = String(re.programParameters1)
                        let params = {pageNum,pageSize,fileName,mediaType}
                        multimedia(params).then(res=>{
                            let re = res.data.data.object
                            if(res.data.message = "success"){
                                this.checkUpload[0].mediaOptions = re
                            }
                        })
                        this.count.push('')
                    }
                    if(re.programParameters2 && re.programParameters2 != null){
                        this.checkUpload.push({
                            tabs: '0',
                            radio: '1',
                            type: re.programParameters2,
                            pic: '',
                            url: '',
                            ref: 'upload1',
                            mediaOptions: []
                        })
                        let pageNum = 1
                        let pageSize = 1000
                        let fileName = ""
                        let mediaType = String(re.programParameters2)
                        let params = {pageNum,pageSize,fileName,mediaType}
                        multimedia(params).then(res=>{
                            let re = res.data.data.object
                            if(res.data.message = "success"){
                                this.checkUpload[1].mediaOptions = re
                            }
                        })
                        this.count.push('')
                    }
                    if(re.programParameters3 && re.programParameters3 != null){
                        this.checkUpload.push({
                            tabs: '0',
                            radio: '1',
                            type: re.programParameters3,
                            pic: '',
                            url: '',
                            ref: 'upload2',
                            mediaOptions: []
                        })
                        let pageNum = 1
                        let pageSize = 1000
                        let fileName = ""
                        let mediaType = String(re.programParameters3)
                        let params = {pageNum,pageSize,fileName,mediaType}
                        multimedia(params).then(res=>{
                            let re = res.data.data.object
                            if(res.data.message = "success"){
                                this.checkUpload[2].mediaOptions = re
                            }
                        })
                        this.count.push('')
                    }
                    if(re.programParameters4 && re.programParameters4 != null){
                        this.checkUpload.push({
                            tabs: '0',
                            radio: '1',
                            type: re.programParameters4,
                            pic: '',
                            url: '',
                            ref: 'upload3',
                            mediaOptions: []
                        })
                        let pageNum = 1
                        let pageSize = 1000
                        let fileName = ""
                        let mediaType = String(re.programParameters4) 
                        let params = {pageNum,pageSize,fileName,mediaType}
                        multimedia(params).then(res=>{
                            let re = res.data.data.object
                            if(res.data.message = "success"){
                                this.checkUpload[3].mediaOptions = re
                            }
                        })
                        this.count.push('')
                    }
                }
            })
        },
        beforeAvatarUpload(file, index, type) {
            const isJPG = ['image/jpeg' , 'image/png' ].indexOf(file.type)
            const isAudio = file.type === 'audio/wav'
            const isVideo = file.type === 'video/mp4'
            this.fileIndex = index
            if(type == 3){
                if (isJPG == -1) {
                    this.$message.error('请上传 JPG、PNG 格式的图片文件!')
                    return false
                }
            }else if(type == 2){
                if(!isAudio){
                    this.$message.error('请上传 wav 格式的音频文件!')
                    return false
                }
            }else if(type == 1){
                if(!isVideo){
                    this.$message.error('请上传 mp4 格式的视频文件!')
                    return false
                }
            }
            
        },
        uploadSectionFile(value,index){
            let param = new FormData()
            param.append("file", value.file)  
            // param.append("filePath", "")  
            this.checkUpload[this.fileIndex].url = ''
            this.checkUpload[this.fileIndex].pic = ''
            
             uploadFile(param).then(res=>{
                if(res.data.message == "success"){
                    this.checkUpload[this.fileIndex].pic = String(res.data.data)
                }else{
                    this.$message.error(this.data.message)
                }
            })
        },
        handleClick(tab, event, index, tabs, radio) {
            this.checkUpload[index].radio = String(tabs - 0 + 1) 
            this.fileIndex = index
            this.checkUpload[this.fileIndex].url = ''
            this.checkUpload[this.fileIndex].pic = ''
            this.checkUpload.splice(0,0)
            eval("this.$refs.upload" +(index))[0].clearFiles()
        },
        // 新媒体库选择
        querySearchAsync(queryString, cb ,index) {
            let that = this
            clearTimeout(this.timeout)
            if (queryString == '') {
	            let pageNum = 1
                let pageSize = 1000
                let fileName = ""
                let mediaType = String(this.checkUpload[index].type)
                let label = ""
                let params = {pageNum,pageSize,fileName,mediaType,label}
                multimedia(params).then(res=>{
                    let re = res.data.data.object
                    if(res.data.message = "success"){
                        that.checkUpload[index].mediaOptions = []
                        re.forEach((el)=>{
                            that.checkUpload[index].mediaOptions.push({
                                value: el.fileName,
                                id: el.id,
                                path: el.sourcePath
                            })
                        })
                        cb(that.checkUpload[index].mediaOptions)
                    }else{
                        cb([])
                    }
                    
                })
	        } else {

                let pageNum = 1
                let pageSize = 1000
                let fileName = ""
                let mediaType = String(this.checkUpload[index].type)
                let label = queryString
                let params = {pageNum,pageSize,fileName,mediaType,label}
                multimedia(params).then(res=>{
                    let re = res.data.data.object
                    if(res.data.message = "success"){
                        that.checkUpload[index].mediaOptions = []
                        re.forEach((el)=>{
                            that.checkUpload[index].mediaOptions.push({
                                value: el.fileName,
                                id: el.id,
                                path: el.sourcePath
                            })
                        })
                        cb(that.checkUpload[index].mediaOptions)
                    }else{
                        cb([])
                    }
                    
                })
            }
        },
        handleSelect(item,index) {
            this.checkUpload[index].url = item.value
            let param = new FormData()
            // param.append("file", null)  
            param.append("filePath", item.path) 
            uploadFile(param).then(res=>{
                if(res.data.message == "success"){
                    this.checkUpload[index].pic = res.data.data
                }else{
                    this.$message.error(res.data.message)
                }
            })
        },
        //新媒体选择

        //选择塑造程序
        change(e,index){
            // this.fileIndex = index
            // this.checkUpload[this.fileIndex].url = ''
            // this.checkUpload[this.fileIndex].pic = ''
            // eval("this.$refs.upload" +(index))[0].clearFiles()
        },
        mediaChangeValue(item,index){
            this.checkUpload[index].mediaOptions.forEach((el,inde)=>{
                if(el.fileName == item){
                    this.checkUpload[this.fileIndex].url = el.fileName
                    this.checkUpload[this.fileIndex].pic = el.sourcePath
                }
            })
            
            
        },
        medieSure(){
            let lock = true
            let mouldName = this.taskName.name
            let programName= this.mouldValue
            let programId = this.mouldId
            let filePathParameters1 = ""
            let filePathParameters2 = ""
            let filePathParameters3 = ""
            let filePathParameters4 = ""
            this.checkUpload.forEach((el,index)=>{
                if(index == 0){
                    filePathParameters1 = el.pic
                }else if(index == 1){
                    filePathParameters2 = el.pic
                }else if(index == 2){
                    filePathParameters3 = el.pic
                }else if(index == 3){
                    filePathParameters4 = el.pic
                }
            })
            if(!mouldName){
                lock = false
                this.$message.error('请输入任务名称')
                return false
            }
            if(!programName){
                lock = false
                this.$message.error('请选择塑造任务程序')
                return false
            }
            this.count.forEach((el,index)=>{
                if(index == 0){
                    if(!filePathParameters1){
                        lock = false
                        this.$message.error('请选择塑造程序')
                        return false
                    }
                }else if(index == 1){
                    if(!filePathParameters2){
                        lock = false
                        this.$message.error('请选择塑造程序')
                        return false
                    }
                }else if(index == 2){
                    if(!filePathParameters3){
                        lock = false
                        this.$message.error('请选择塑造程序')
                        return false
                    }
                }else if(index == 3){
                    if(!filePathParameters4){
                        lock = false
                        this.$message.error('请选择塑造程序')
                        return false
                    }
                }
            })
            

            if(lock){
                let params = {mouldName,programId,programName,filePathParameters1,filePathParameters2,filePathParameters3,filePathParameters4}
                insertMould(params).then(res=>{
                    if(res.data.message == "success"){
                        this.$message({
                            message: '新建塑造待处理',
                            type: 'success'
                        });
                        this.$router.go(-1)
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            }
            

            
        }
    }
}
</script>

<style lang='less' scoped>
.mouldAddPages{
    width: 100%;
    height: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
    .Box{
        height: 110px;
        .Title{
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 550;
        }
        .topInput{
            padding: 15px;
        }
    }
    .lists{
        .Title{
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 550;
        }
        .topLists{
            margin-top: 20px;
            /deep/.el-form{
                display: flex;
                align-content: center;
                flex-wrap: wrap;
            }
            img{
                height: 70%;
            }
            .ulLists{
                width: 100%;
                height: 200px;
                >ul{
                    width: 100%;
                    height: 100%;
                    overflow: auto;
                    >li{
                        background-color: #E6F7FF;
                        margin-bottom: 5px ;
                        color: #8ED0FD;
                    }
                }
                .tips{
                    font-size: 14px;
                    color: #999;
                }
            }
        }
        /deep/.avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 178px;
            line-height: 178px;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100%;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .deleteFileList{
            width: 100%;
            height: 100%;
            background-color: transparent;
            position: absolute;
            top: 0;
            left: 0;
        }
        .avatar {
            width: 100%;
            display: block;
        }
        /deep/.el-form-item__content {
            width: 260px;
        }
        /deep/.el-tabs__nav-wrap::after {
            height: 0px;
        }
    }
    .bottom{
        padding-left: 115px;
    }
}
</style>